<template>
    <div class="v-warp">
        <van-nav-bar title="全部" :fixed="true">
            <i class="iconfont ireturn" slot="left" @click="back"></i>
            <span slot="right" @click="popFilter = true" >筛选<i class="iconfont ishaixuanpaixu"></i></span>
        </van-nav-bar>
        <div class="v-body v-list-body">
               <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多了"
                  @load="loadData"
                >
            <van-row gutter="10">
                <van-col span="8" class="v-item" v-for="item in vDataList">
                   <a :href="'#/detail/'+item.vid">
                      <div class="v-item-imghd">
                        <img v-lazy="item.vpic" />
                        <span class="v-item-imghd-hot">{{item.vnote}}</span>
                      </div>
                      <h2>{{item.vname}}</h2>
                      <p>{{item.vpublishyear +'/'}}{{item.vpublisharea+'/'}}{{item.tnamel2}}</p>
                   </a>
                </van-col>
            </van-row>
               </van-list>
          <van-dropdown-menu class="v-list-nav">
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
          </van-dropdown-menu>
        </div>
        <van-popup
          v-model="popFilter"
          position="right"
          :style="{ height: '100%',width:'85%' }"
        >
          <van-nav-bar title="筛选" :fixed="true" />
          <div class="v-filter-body">
            <van-collapse v-model="filterActiveNames">
            <van-collapse-item title="类型" name="1">
              <span v-for="item in types" class="v-filter-item" 
                  :class="params.tid == item.tid?'active':''"
                  @click="params.tid = item.tid"
              >{{item.tname}}</span>
            </van-collapse-item>
            <van-collapse-item title="地区" name="2">
                <span v-for="item in areas" class="v-filter-item" :class="params.area == item?'active':''"
                    @click="params.area = item"
                      >{{item}}</span>
            </van-collapse-item>
            <van-collapse-item title="年份" name="3">
                <span v-for="item in years" class="v-filter-item" :class="params.year == item?'active':''"
                    @click="params.year = item"
                >{{item}}</span>
            </van-collapse-item>
            <van-collapse-item title="语言" name="4">
                <span v-for="item in langs" class="v-filter-item" :class="params.lang == item?'active':''"
                    @click="params.lang = item"
                >{{item}}</span>
            </van-collapse-item>
          </van-collapse>          
          </div>
          <van-row class="v-filter-btn">
            <van-search placeholder="片名/演员" v-model="params.vname" />
            <van-col span="12">
              <van-button type="primary" plain size="large">重置</van-button>
            </van-col>
            <van-col span="12">
              <van-button type="primary" size="large" @click="doSearch">确定</van-button>
            </van-col>
          </van-row>
        </van-popup>
        <BackTop />
    </div>
</template>
<script>
export default {
  name: "list",
  components: {
  },
  data() {
    return {
      popFilter:false,
      filterActiveNames:['1','2','3','4'],
      value1: 0,
      value2: 0,
      option1: [
        { text: '最热', value: 0 },
        { text: '最新', value: 1 },
        { text: '评分', value: 2 }
      ],
      option2: [
        { text: '全部', value: 0 },
        { text: '连载', value: 1 },
        { text: '完结', value: 2 },
      ],
      years:this.$api.data.years,
      langs:this.$api.data.langs,
      areas:this.$api.data.areas,
      types:[],
      params:{
        year:'',
        lang:'',
        area:'',
        vname:'',
        tid:0,
        pageno:1,
      },
      vDataList:[],
      loading:false,
      finished:false,
      pages:1,
    };
  },
  methods:{
    back(){
      this.$back();
    },
    doSearch(){
      this.reSearch();
      this.getDataList();
      this.popFilter = false;
    },
    filterReset(){

    },
    reSearch(){
      this.params.pageno = 1;
      this.vDataList = [];
    },
    loadData(){
      if(this.params.pageno > this.pages){
        this.finished = true;
        this.loading = false;
        return;
      }
      this.getDataList();
    },
    getDataList(){
      this.finished = false;
      this.loading = true;
      let that = this;
      setTimeout(() => {
          that.$ajax.post(that.$api.list,that.params,successRes=>{
            that.pages = successRes.data.pages;
            that.vDataList = that.vDataList.concat(successRes.data.records);
            that.params.pageno++;
            that.loading = false;
        })
      }, 1000);
    }
  },
  mounted() {
    let that = this;
    that.params.tid = this.$route.query.tid | 0;
    that.$ajax.get(that.$api.typeN,{},successRes =>{
        if(successRes.success){
          that.types = successRes.data;
        }
    })
  },
  activated(){
    this.params = JSON.parse(localStorage.getItem("v_params"));
    this.vDataList = JSON.parse(localStorage.getItem("v_vDataList"));
    this.pages = localStorage.getItem("v_pages");
  },
  beforeRouteLeave (to, from, next) {
    if(to.name == "detail"){
      from.meta.keepAlive = true;
      //缓存
      localStorage.setItem("v_params",JSON.stringify(this.params));
      localStorage.setItem("v_vDataList",JSON.stringify(this.vDataList));
      localStorage.setItem("v_pages",this.pages);
    }else{
      from.meta.keepAlive = false;
    }
    next();
  }
};
</script>
<style lang="less" >
</style>
